<template>
    <div ref="axisRef" class="axis-group">
        <div ref="axisBoxRef" class="axis-x">
            <div ref="boxWrapperRef" class="axis-wrapper">
                <div
                    v-for="(x, idx) in props.source"
                    :key="idx"
                    :style="`width: ${props.source[idx]}%;`"
                    class="axis-area"
                    @click="(e) => handelAxis(e, idx)"
                >
                    <slot :index="idx"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import useScale from "./hooks/useScale";
import useTranslation from "./hooks/useTranslation";
import { operateType } from "@/enum";
const props = defineProps({
    source: {
        type: Array,
        default() {
            return [];
        },
    },
    config: {
        type: Object,
        default() {
            return {
                scaleMax: 5,
                scaleStep: 0.1,
            };
        },
    },
});
const emits = defineEmits(["click"]);

// ref
const axisRef = ref(null);
const axisBoxRef = ref(null);
const boxWrapperRef = ref(null);

// 轴
const state = reactive({
    scaleGroup: {
        origin: null,
        offset: null,
        scale: 1,
    },
    translateGroup: {
        offset: null,
        startX: null,
        scale: 1,
    },
    status: operateType.DEFAULT,
});

const { scaleGroup, translateGroup, status } = toRefs(state);

useScale(
    { axisRef, axisBoxRef, boxWrapperRef },
    scaleGroup,
    translateGroup,
    props.config,
    status
);
useTranslation(
    { axisRef, axisBoxRef, boxWrapperRef },
    scaleGroup,
    translateGroup,
    props.config,
    status
);

function handelAxis(e, index) {
    const { clientX } = e;
    const { offsetLeft, clientLeft } = axisRef.value;
    const scale = scaleGroup.value.scale;
    const viewportWidth = Number.parseFloat(axisBoxRef.value.clientWidth);
    const axisWidth = Number.parseFloat(boxWrapperRef.value.clientWidth);
    const offsetX = Number.parseFloat(boxWrapperRef.value.style.left || 0);

    const viewportX = clientX - offsetLeft - clientLeft;
    const viewportXPercentage = viewportX / viewportWidth;
    const axisX = viewportX - offsetX - clientLeft;
    const axisXPercentage = axisX / axisWidth;

    const area = boxWrapperRef.value.children[index];
    const viewportAreaX = area.getBoundingClientRect().x;
    const areaX = viewportX - (viewportAreaX - offsetLeft);
    const areaXPercentage = areaX / area.clientWidth;

    emits("click", {
        scale,
        viewportX,
        viewportXPercentage,
        axisX,
        axisXPercentage,
        $index: index,
        areaX,
        areaXPercentage,
    });
}
function getStart() {
    const axisWidth = Number.parseFloat(boxWrapperRef.value.clientWidth);
    const offsetX = Number.parseFloat(boxWrapperRef.value.style.left || 0);
    return {
        value: -offsetX,
        percent: -offsetX / axisWidth,
    };
}
function getEnd() {
    const viewportWidth = Number.parseFloat(axisBoxRef.value.clientWidth);
    const axisWidth = Number.parseFloat(boxWrapperRef.value.clientWidth);
    const offsetX = Number.parseFloat(boxWrapperRef.value.style.left || 0);
    return {
        value: -offsetX + viewportWidth,
        percent: (-offsetX + viewportWidth) / axisWidth,
    };
}
function getScale() {
    return scaleGroup.value.scale;
}
function getStatus() {
    return status.value;
}

defineExpose({
    getStart,
    getEnd,
    getScale,
    getStatus,
});
</script>

<style css>
@import url(./index.css);
</style>
